<template>
    <div id="cesium-container">
    </div>
</template>
  
<script>
export default {
    name: 'ThreeDTilesAdjustHeight',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("cesium-container", {
                // terrainProvider: new window.Cesium.CesiumTerrainProvider({
                //     url: 'http://data.mars3d.cn/terrain',
                //     requestWaterMask: true,
                //     requestVertexNormals: true
                // }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: false,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });
            //开启地形深度检测
            window.viewer.scene.globe.depthTestAgainstTerrain = true;
            //加载3dtiles模型、定位
            let tileset = await new window.Cesium.Cesium3DTileset({
                url: "/model/Tileset/示例建筑/tileset.json",
            }).readyPromise
            window.viewer.scene.primitives.add(tileset);
            window.viewer.zoomTo(
                tileset,
                new window.Cesium.HeadingPitchRange(
                    0.0,
                    -0.5,
                    tileset.boundingSphere.radius * 2.0
                )
            );
            // this.adjustTilesetHeight(tileset,200)
            let height=0
            setInterval(()=>{
                this.adjustTilesetHeight(tileset,height++)
            },1000)
        },
        adjustTilesetHeight(tileset, height = 10) {
            //计算出模型包围球的中心点(弧度制)
            const cartographic = window.Cesium.Cartographic.fromCartesian(
                tileset.boundingSphere.center
            );
            //计算与模型包围球中心点经纬度相同的地表点位
            const surface = window.Cesium.Cartesian3.fromRadians(
                cartographic.longitude,
                cartographic.latitude,
                0.0
            );
            //计算调整高度后的模型包围球的中心点
            const offset = window.Cesium.Cartesian3.fromRadians(
                cartographic.longitude,
                cartographic.latitude,
                height
            );
            //计算差向量
            const translation = window.Cesium.Cartesian3.subtract(
                offset,
                surface,
                new window.Cesium.Cartesian3()
            );
            //修改模型的变换矩阵
            tileset.modelMatrix = window.Cesium.Matrix4.fromTranslation(translation);
        }
    }
}
</script>
  
<style>
#cesium-container {
    width: 100%;
    height: 100%;
}
</style>
  